<template>
  <div class="page-container">
    <el-card class="main-card">
      <div slot="header" class="card-header">
        <span>商品列表</span>
        <div class="header-operations">
          <el-input
            v-model="searchQuery"
            placeholder="请输入商品名称/编号"
            class="search-input"
            clearable
            prefix-icon="el-icon-search"
          >
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleAdd">添加商品</el-button>
        </div>
      </div>
      
      <el-table
        :data="productList"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column label="商品图片" width="100" align="center">
          <template slot-scope="scope">
            <div class="product-image-container">
              <el-image 
                :src="scope.row.imageUrl" 
                fit="cover"
                class="product-image"
                :preview-src-list="scope.row.imageUrl ? [scope.row.imageUrl] : []"
                @error="handleImageError">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column prop="category" label="商品分类" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="价格" width="120" align="right">
          <template slot-scope="scope">
            <span class="price-text">¥{{ scope.row.price.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="100" align="right"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
              {{ scope.row.status === 'active' ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="170" align="center">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="handleStatus(scope.row)"
            >{{ scope.row.status === 'active' ? '下架' : '上架' }}</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑商品对话框 -->
    <el-dialog
      :title="dialogType === 'add' ? '新增商品' : '编辑商品'"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      custom-class="custom-dialog"
      @closed="resetForm"
    >
      <el-form :model="productForm" :rules="rules" ref="productForm" label-width="100px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="productForm.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品编号" prop="code">
          <el-input v-model="productForm.code" placeholder="请输入商品编号"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryId">
          <el-select 
            v-model="productForm.categoryId" 
            placeholder="请选择商品分类" 
            style="width: 100%;"
            filterable>
            <el-option
              v-for="item in categoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number 
            v-model="productForm.price" 
            :precision="2" 
            :step="0.1" 
            :min="0"
            style="width: 100%;"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品数量" prop="stock" v-if="dialogType === 'add'">
          <el-input-number 
            v-model="productForm.stock" 
            :min="0" 
            :step="1"
            style="width: 100%;"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品图片" prop="imageUrl">
          <el-upload
            class="product-image-uploader"
            :action="uploadConfig.action"
            :headers="uploadConfig.headers"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload">
            <div class="upload-area">
              <img v-if="productForm.imageUrl" :src="productForm.imageUrl" class="uploaded-image" @error="handleUploadedImageError">
              <div v-else class="upload-placeholder">
                <i class="el-icon-plus upload-icon"></i>
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述" prop="description">
          <el-input type="textarea" v-model="productForm.description" :rows="3" placeholder="请输入商品描述"></el-input>
        </el-form-item>
        <el-form-item label="商品状态" prop="status">
          <el-switch
            v-model="productForm.status"
            :active-value="'active'"
            :inactive-value="'locked'"
            active-color="#ff6b00"
            inactive-color="#dcdfe6"
            active-text="上架"
            inactive-text="下架">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="删除确认"
      :visible.sync="deleteDialogVisible"
      width="400px"
      custom-class="custom-dialog"
      center
    >
      <div class="delete-confirm">
        <i class="el-icon-warning"></i>
        <span>确定要删除该商品吗？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 上下架确认对话框 -->
    <el-dialog
      :title="currentProduct?.status === 'active' ? '下架确认' : '上架确认'"
      :visible.sync="statusDialogVisible"
      width="400px"
      custom-class="custom-dialog"
      center
    >
      <div class="status-confirm">
        <i class="el-icon-warning"></i>
        <span>确定要{{ currentProduct?.status === 'active' ? '下架' : '上架' }}该商品吗？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="statusDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getProductList, 
  getProductDetail, 
  addProduct, 
  updateProduct, 
  deleteProduct, 
  updateProductStatus,
  // eslint-disable-next-line no-unused-vars
  getCategoryList,  // 使用直接API调用替代，但保留导入以便后续可能的使用
  // eslint-disable-next-line no-unused-vars
  uploadProductImage  // 保留导入，因为它在模板中的 action 属性中间接使用
} from '@/api/product'

export default {
  name: 'ProductList',
  data() {
    return {
      searchQuery: '',
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      productList: [],
      dialogType: 'add',
      dialogVisible: false,
      deleteDialogVisible: false,
      statusDialogVisible: false,
      currentProduct: null,
      productForm: {
        id: '',
        name: '',
        code: '',
        categoryId: '',
        price: 0,
        stock: 0,
        imageUrl: '',
        status: 'active',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入商品编号', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '请选择商品分类', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ],
        imageUrl: [
          { required: true, message: '请上传商品图片', trigger: 'blur' }
        ],
        description: [
          { max: 200, message: '描述不能超过200字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择商品状态', trigger: 'blur' }
        ]
      },
      categoryOptions: [],
      uploadConfig: {
        action: '/api/product/image/upload',
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
        }
      }
    }
  },
  created() {
    // 页面创建时获取商品列表
    this.fetchProducts();
    
    // 添加对全局刷新事件的监听
    this.$bus.$on('refresh-product-list', this.handleRefresh);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    this.$bus.$off('refresh-product-list', this.handleRefresh);
  },
  methods: {
    // 处理刷新事件
    handleRefresh() {
      console.log('ProductList收到刷新请求');
      this.fetchProducts();
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      
      try {
        const date = new Date(dateStr);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
      } catch (e) {
        console.error('日期格式化错误:', e);
        return dateStr;
      }
    },

    // 获取商品列表
    async fetchProducts() {
      this.loading = true
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchQuery
        }
        const res = await getProductList(params)
        if (res.code === 200) {
          // 处理PageResult对象
          let pageResult = res.data;
          // 确保所有商品的图片URL是完整的
          if (pageResult.records && Array.isArray(pageResult.records)) {
            pageResult.records.forEach(product => {
              if (product.imageUrl) {
                product.imageUrl = this.ensureFullImageUrl(product.imageUrl);
              }
            });
          }
          this.productList = pageResult.records
          this.total = pageResult.total
        }
      } catch (error) {
        console.error('获取商品列表失败:', error)
        // 错误消息已由全局拦截器处理，这里不再重复显示
      } finally {
        this.loading = false
      }
    },

    // 编辑商品时获取详情
    async handleEdit(row) {
      try {
        // 设置对话框类型为编辑模式
        this.dialogType = 'edit';
        
        // 第1步: 重置表单数据
        this.resetForm();
        
        // 第2步: 先获取所有分类列表
        console.log('开始加载分类数据...');
        await this.fetchCategories();
        console.log('分类数据加载完成，共', this.categoryOptions.length, '个分类');
        
        // 第3步: 获取商品详情
        console.log('开始获取商品详情，ID:', row.id);
        const res = await getProductDetail(row.id);
        
        if (res.code === 200 && res.data) {
          const productData = res.data;
          console.log('获取到商品详情:', productData);
          
          // 第4步: 将categoryId转换为字符串
          if (productData.categoryId !== undefined && productData.categoryId !== null) {
            productData.categoryId = String(productData.categoryId);
            console.log('分类ID转换为字符串:', productData.categoryId);
            
            // 检查分类ID是否存在于选项中
            const matchedCategory = this.categoryOptions.find(c => String(c.id) === productData.categoryId);
            console.log('分类ID匹配结果:', matchedCategory ? '找到匹配' : '未找到匹配');
            
            if (!matchedCategory && productData.category) {
              console.log('尝试通过分类名称匹配:', productData.category);
              const categoryByName = this.categoryOptions.find(c => c.name === productData.category);
              if (categoryByName) {
                console.log('通过名称找到匹配:', categoryByName.name);
                productData.categoryId = categoryByName.id;
              }
            }
          }
          
          // 第5步: 处理图片URL
          if (productData.imageUrl) {
            productData.imageUrl = this.ensureFullImageUrl(productData.imageUrl);
          }
          
          // 第6步: 更新上传token
          this.updateUploadToken();
          
          // 第7步: 设置表单数据
          this.productForm = { ...productData };
          console.log('表单数据设置完成:', this.productForm);
          
          // 第8步: 在下一个事件循环中检查分类ID是否正确显示
          this.$nextTick(() => {
            console.log('表单渲染后的分类ID:', this.productForm.categoryId);
            console.log('表单分类ID类型:', typeof this.productForm.categoryId);
          });
          
          // 第9步: 打开对话框
          this.dialogVisible = true;
        } else {
          this.$message.error('获取商品详情失败');
        }
      } catch (error) {
        console.error('编辑商品失败:', error);
        this.$message.error('编辑商品失败');
      }
    },

    // 提交表单（新增/编辑）
    async submitForm() {
      this.$refs.productForm.validate(async (valid) => {
        if (valid) {
          try {
            let res;
            if (this.dialogType === 'add') {
              res = await addProduct(this.productForm)
            } else {
              // 使用字符串格式的UUID作为ID
              const productId = this.productForm.id;
              console.log('更新商品ID(UUID):', productId);
              
              res = await updateProduct(productId, this.productForm)
            }
            
            if (res.code === 200) {
              this.$message.success(this.dialogType === 'add' ? '添加成功' : '修改成功')
              this.dialogVisible = false
              this.fetchProducts()
            }
          } catch (error) {
            console.error('提交商品信息失败:', error)
            // 错误消息已由全局拦截器处理，这里不再重复显示
          }
        }
      })
    },

    // 确认删除
    async confirmDelete() {
      if (!this.currentProduct) return
      try {
        // 使用字符串格式的UUID作为ID
        const productId = this.currentProduct.id;
        console.log('删除商品ID(UUID):', productId);
        
        const res = await deleteProduct(productId)
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.deleteDialogVisible = false
          this.fetchProducts()
        }
      } catch (error) {
        console.error('删除商品失败:', error)
        // 错误消息已由全局拦截器处理，这里不再重复显示
      }
    },

    // 确认修改状态
    async confirmStatus() {
      if (!this.currentProduct) return
      try {
        // 使用字符串格式的UUID作为ID
        const productId = this.currentProduct.id;
        console.log('更新商品状态ID(UUID):', productId);
        
        const newStatus = this.currentProduct.status === 'active' ? 'locked' : 'active'
        
        // 调用修改后的API
        const res = await updateProductStatus(productId, newStatus)
        if (res.code === 200) {
          this.$message.success('状态更新成功')
          this.statusDialogVisible = false
          this.fetchProducts()
        }
      } catch (error) {
        console.error('更新商品状态失败:', error)
        // 错误消息已由全局拦截器处理，这里不再重复显示
      }
    },

    // 图片上传成功回调
    // eslint-disable-next-line no-unused-vars
    async handleImageSuccess(response, file) {  // file 参数在某些场景可能会用到
      if (response.code === 200) {
        // 处理后端返回的图片路径
        let imageUrl = '';
        // 如果是字符串，直接使用；如果是对象且有url属性，则使用url值
        if (typeof response.data === 'string') {
          imageUrl = response.data;
          console.log('后端返回的字符串图片路径:', imageUrl);
        } else if (response.data && response.data.url) {
          imageUrl = response.data.url;
          console.log('后端返回的对象中的url图片路径:', imageUrl);
        } else {
          console.error('后端返回的数据格式:', response.data);
          this.$message.error('图片路径格式不正确');
          return;
        }
        
        // 对于阿里云OSS图片路径进行特殊处理
        if (imageUrl.includes('aliyuncs.com')) {
          // 直接使用完整的阿里云OSS URL，不进行任何转换
          this.productForm.imageUrl = imageUrl;
          console.log('设置的阿里云OSS图片路径:', this.productForm.imageUrl);
        } else {
          // 确保URL是完整的
          this.productForm.imageUrl = this.ensureFullImageUrl(imageUrl);
          console.log('设置的普通图片路径:', this.productForm.imageUrl);
        }
      } else {
        this.$message.error('图片上传失败');
        console.error('图片上传失败响应:', response);
      }
    },

    // 确保图片URL是完整的
    ensureFullImageUrl(url) {
      if (!url) return '';
      
      // 如果已经是完整URL
      if (url.startsWith('http://') || url.startsWith('https://')) {
        // 对于阿里云OSS的URL，需要确保正确获取
        if (url.includes('aliyuncs.com')) {
          // 从控制台输出完整URL，便于调试
          console.log('阿里云OSS图片URL:', url);
          
          // 如果URL中含有特殊字符，可能需要进行编码
          // return encodeURI(url);
          
          // 返回原始URL，但在控制台中记录，便于排查问题
          return url;
        }
        return url;
      }
      
      // 如果是相对路径，根据环境添加基础URL
      // 获取当前网页的协议和主机名
      const baseUrl = `${window.location.protocol}//${window.location.host}`;
      
      // 如果路径以/开头，直接拼接
      if (url.startsWith('/')) {
        return `${baseUrl}${url}`;
      }
      
      // 否则添加/再拼接
      return `${baseUrl}/${url}`;
    },

    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.fetchProducts()
    },

    // 重置搜索
    resetSearch() {
      this.searchQuery = ''
      this.currentPage = 1
      this.fetchProducts()
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchProducts()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchProducts()
    },

    handleAdd() {
      this.dialogType = 'add'
      this.resetForm()
      
      // 先获取分类数据
      this.fetchCategories().then(categories => {
        console.log('新增商品 - 已加载分类选项:', categories);
        
        // 更新上传组件的token
        this.updateUploadToken()
        
        // 打开对话框
        this.dialogVisible = true
      }).catch(error => {
        console.error('新增商品 - 加载分类失败:', error);
        this.$message.error('加载分类数据失败');
        
        // 即使加载分类失败，也打开对话框
        this.updateUploadToken()
        this.dialogVisible = true
      })
    },
    
    // 获取商品分类
    async fetchCategories() {
      try {
        // 发起请求获取分类数据
        const res = await this.$http.get('/category/getAllCategory');
        console.log('分类接口返回原始数据:', res);
        
        // 检查响应格式
        if (!res.data) {
          console.error('分类接口返回数据缺少data字段');
          return [];
        }
        
        // 确保是数组类型
        let categoryList = [];
        if (Array.isArray(res.data)) {
          categoryList = res.data;
        } else if (typeof res.data === 'object' && res.data.records && Array.isArray(res.data.records)) {
          // 处理可能的分页数据
          categoryList = res.data.records;
        } else {
          console.error('分类数据不是有效的数组:', res.data);
          return [];
        }
        
        // 清空并重建分类选项
        this.categoryOptions = [];
        
        // 记录并处理每条分类数据
        categoryList.forEach((item, index) => {
          // 检查必要字段
          if (!item) {
            console.warn(`分类数据[${index}]: 无效数据，跳过`);
            return;
          }
          
          // 确保ID存在
          if (item.id === undefined || item.id === null) {
            console.warn(`分类数据[${index}]: 缺少ID，跳过`, item);
            return;
          }
          
          // 将ID转换为字符串
          const id = String(item.id);
          const name = item.name || '未命名分类';
          
          console.log(`分类数据[${index}]: ID=${id}(${typeof id}), 名称=${name}`);
          
          this.categoryOptions.push({
            id: id,
            name: name
          });
        });
        
        console.log('处理后的分类选项数组:', this.categoryOptions);
        return this.categoryOptions;
      } catch (error) {
        console.error('获取分类列表失败:', error);
        return [];
      }
    },
    
    handleDelete(row) {
      this.currentProduct = row
      this.deleteDialogVisible = true
    },
    handleStatus(row) {
      this.currentProduct = row
      this.statusDialogVisible = true
    },
    resetForm() {
      this.productForm = {
        id: '',
        name: '',
        code: '',
        categoryId: '',
        price: 0,
        stock: 0,
        imageUrl: '',
        status: 'active',
        description: ''
      }
      if (this.$refs.productForm) {
        this.$refs.productForm.clearValidate()
      }
      console.log('表单已重置:', this.productForm)
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 更新上传组件的token
    updateUploadToken() {
      this.uploadConfig = {
        ...this.uploadConfig,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
        }
      }
    },
    handleImageError(error) {
      console.error('图片加载错误:', error);
      // 不显示提示，避免过多提示打扰用户
    },
    handleUploadedImageError(error) {
      console.error('上传图片加载错误:', error);
      this.$message.error('图片加载失败，请检查OSS配置');
    }
  },
  mounted() {
    // 已在created钩子中调用过，此处不再重复调用
    // this.fetchProducts()
    // 在组件挂载时更新上传token
    this.updateUploadToken()
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 120px);
}

.main-card {
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #304156;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* Element UI 主题覆盖 */
:deep(.el-button--primary) {
  background-color: #ff6b00;
  border-color: #ff6b00;
}

:deep(.el-button--primary:hover),
:deep(.el-button--primary:focus) {
  background-color: #ff8533;
  border-color: #ff8533;
}

:deep(.el-button--text) {
  color: #ff6b00;
}

:deep(.el-button--text:hover),
:deep(.el-button--text:focus) {
  color: #ff8533;
}

:deep(.el-tag--success) {
  background-color: rgba(255, 107, 0, 0.1);
  border-color: rgba(255, 107, 0, 0.2);
  color: #ff6b00;
}

:deep(.el-tag--info) {
  background-color: rgba(144, 147, 153, 0.1);
  border-color: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.el-card {
  border-radius: 8px;
}

.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e6e6e6;
}

.el-table {
  color: #304156;
}

.el-table th {
  background-color: #f5f7fa;
  color: #304156;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #ff6b00;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #ff6b00;
}

/* 对话框样式 */
.custom-dialog {
  border-radius: 8px;
}

.custom-dialog .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.custom-dialog .el-dialog__body {
  padding: 30px 20px;
}

.custom-dialog .el-dialog__footer {
  padding: 10px 20px 20px;
  border-top: 1px solid #ebeef5;
}

.delete-confirm,
.status-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.delete-confirm i,
.status-confirm i {
  font-size: 24px;
  color: #ff6b00;
  margin-right: 10px;
}

/* 表单样式 */
.el-form-item {
  margin-bottom: 22px;
}

.el-form-item__label {
  font-weight: 400;
  color: #606266;
}

.el-input__inner:focus,
.el-input__inner:hover {
  border-color: #ff6b00;
}

.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #ff6b00;
}

.el-input-number.is-controls-right .el-input__inner:focus,
.el-input-number.is-controls-right .el-input.is-focus .el-input__inner {
  border-color: #ff6b00;
}

/* 图片上传样式 */
.product-image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.product-image-uploader:hover {
  border-color: #ff6b00;
}

.product-image-uploader .upload-icon {
  font-size: 28px;
  color: #8c939d;
}

.product-image-uploader .uploaded-image {
  width: 148px;
  height: 148px;
  object-fit: cover;
}

/* 扩大上传图片的点击热区 */
.product-image-uploader .el-upload {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-image-uploader i.el-icon-plus {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 按钮和开关样式 */
.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.el-button--danger:hover,
.el-button--danger:focus {
  background-color: #f78989;
  border-color: #f78989;
}

.el-switch.is-checked .el-switch__core {
  border-color: #ff6b00;
  background-color: #ff6b00;
}

/* 表格样式补充 */
.el-table .cell {
  padding: 8px 16px;
}

.el-table th {
  padding: 8px 0;
}

.el-table th > .cell {
  font-weight: 500;
  padding-left: 16px;
  padding-right: 16px;
}

.product-image-container {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #909399;
  font-size: 20px;
}

.upload-placeholder {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8c939d;
  cursor: pointer;
}

.upload-icon {
  font-size: 28px;
}

.uploaded-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
</style> 